<!DOCTYPE html>
<html lang="en">
<head>
    <title>查询保单</title>
    <link rel="stylesheet" href="/css/laypage.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/zzsc.css">
    <link rel="stylesheet" href="/css/dcalendar.picker.css"/>
    <link href="/js/filter/Fliter.css" rel="stylesheet"/>

    <script type="text/javascript" src="/js/jquery.min.js"></script>
<#-- <script src="/js/jquery2.0.3.min.js"></script>-->
    <script src="/js/filter/Filter.js"></script>
    <style type="text/css">
        .display {
            display: none;
        }
    </style>
</head>
<body>
<section id="container">
<#include "sider.ftl"><#--引入头部和导航栏-->
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info" style="background: rgb(240, 188, 180)">
                <div style="position:relative;left: 600px"><h2><b>保险交易查询</h2></div>
                <br>
            <#--条件查询-->
                <div class="zzsc-container" style="background: rgb(240, 188, 180)">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6" style="width: 1300px;">
                                   <#-- <div id="demo3" style="height: 40px;"></div>
                                    <div id="demo4" style="height: 40px;></div>-->

                                <input type="text" id="keyword" size="25"><input type="button" id="searchBtn"
                                                                                 value="搜索">
                                日期：
                                <input id='mydatepicker2' type='text' size="10"/>--<input id='mydatepicker3' type='text'
                                                                                          size="10"/>
                            <#--                               <input type="text" id="idcard" size="25">
                                                            <input type="text" id="carid" size="20">--><br><br>
                                <button type="button" class="btn btn-success payBtn" value="0">未缴费</button>
                                <button type="button" class="btn btn-success payBtn" value="1">已缴费</button>
                                <button type="button" class="btn btn-success reviewingBtn" value="1">退保审核中</button>
                                <button type="button" class="btn btn-success reviewingBtn" value="0">正常</button>
                                <button type="button" class="btn btn-success reviewingBtn" value="2">退保成功</button>
                                <button type="button" class="btn btn-success reviewingBtn" value="3">退保失败</button>
                                <button type="button" class="btn btn-success" id="allBtn">查询所有保单</button>
                            <#--<button type="button" class="btn btn-danger" id="buyBtn">购买保险</button>-->
                                <button type="button" class="btn btn-info" id="exportBtn">导出所有数据</button>
                            </div>
                        </div>
                    </div>
                </div>
                <br>
                <div class="panel panel-default" id="app">

                    <table class="table" ui-jq="footable" ui-options='{
                        "paging": {
                        "enabled": true},
                        "filtering": {
                        "enabled": true},
                        "sorting": {
                        "enabled": true}}'>
                        <thead>
                        <tr style="background: beige">
                            <th>序号</th>
                            <th class="display"><input type="checkbox" id="cboxes">全选</th>
                            <th>保单号</th>
                            <th>客户名称</th>
                            <th>联系方式</th>
                            <th>车牌号</th>
                            <th width="120px">购买时间</th>
                            <th>是否缴费</th>
                            <th>支付方式</th>
                            <th>操作员</th>
                            <th>套餐类型</th>
                            <th>订单状态</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="active" v-for="(item,index) in result">
                            <td>{{index+1}}</td>
                            <td class="display"><input type="checkbox" class="singlebox"></td>
                            <td><a href="#" @click="getOrderDetail(item.oid)">{{item.oid}}</a></td>
                            <td>{{item.user.sname}}</td>
                            <td>{{item.user.sphone}}</td>
                            <td>{{item.cars.licenseNum}}</td>
                            <td>{{item.addtime}}</td>
                            <td v-if="item.paystate=='1'"><a href="#" class="label label-success">已缴费</a></td>
                            <td v-else><a href="#" class="label label-danger">未缴费</a></td>

                            <td v-if="item.paymethod=='0'"><a href="#" class="label label-danger">未缴费</a></td>
                            <td v-else-if="item.paymethod=='1'">支付宝</td>
                            <td v-else-if="item.paymethod=='2'">微信</td>
                            <td v-else-if="item.paymethod=='3'">银行卡</td>
                            <td v-else-if="item.paymethod=='4'">现金</td>
                            <td>{{item.emp.empName}}</td>
                            <td>{{item.combo.combname}}</td>
                            <td v-if="item.ostate=='0'">正常</td>
                            <td v-else-if="item.ostate=='4'"><a href="#" class="label label-danger">未缴费</a>
                            </td>
                            <td v-else-if="item.ostate=='1'">退保审核中</td>
                            <td v-else-if="item.ostate=='2'">退保成功</td>
                            <td v-else-if="item.ostate=='3'">退保未成功</td>
                            <td v-if="item.oremark==''">无</td>
                            <td v-else>{{item.oremark}}</td>
                            <td v-if="item.paystate=='0' && item.ostate=='4'">
                                <a href="#" @click="payorder(item.ouid)">缴费|</a>
                                <a href="#" @click="closeOrder(item.ouid)">关闭</a>
                            </td>
                            <td v-else-if="item.ostate=='1'">审核中，不能操作</td>
                            <td v-else>
                                <a v-if="item.ostate=='0'" href="#" @click="returnInsurance(item.oid)">退保|</a>
                                <a v-if="item.ostate=='3'" href="#" @click="returnInsurance(item.oid)">退保|</a>
                                <a v-if="item.ostate=='2'" href="#" @click="getOrderByOuid(item.ouid)">续保|</a>
                                <a v-if="" href="#" @click="getOrderDetail(item.oid)" title="导出保单">
                                    <span class="glyphicon glyphicon-log-out"></span></a></td>
                        </tr>
                        <tr>
                            <td colspan="11">
                                <div id="pagenav"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            </div>
        </section>
    <#include "/foot.html"><#--引入底部-->
    </section>
</section>
</body>
</html>
<script type="text/javascript" src="/js/vue/vue.min.js"></script>
<script type="text/javascript" src="/js/layer/layer.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/laypage/laypage.js"></script>
<#--<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>-->
<script type="text/javascript" src="/js/dcalendar.picker.js"></script>
<script type="text/javascript">
    /////定义全局变量
    ////支付状态 点击按钮之后获取
    var paystate = null;
    var ostate = null;

    $('#mydatepicker2').dcalendarpicker({
        format: 'yyyy-mm-dd'
    });
    $('#mydatepicker3').dcalendarpicker({
        format: 'yyyy-mm-dd'
    });
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });
    var getOrderPage = function (curr) {
        $.ajax({
            url: "/order/queryOrderPage.do",
            type: "POST",
            dataType: "json",
            data: {
                pageNum: curr || 1,
                pageSize: 10,
                keyword: $("#keyword").val(),
                /*oid: $("#orderid").val(),*/
                /*scardId: $("#idcard").val(),*/
                startDate: $("#mydatepicker2").val(),
                endDate: $("#mydatepicker3").val(),
                /*licensenum: $("#carid").val(),*/
                paystate: paystate,
                ostate: ostate
            },
            success: function (data) {
                app.result = data.page;
                laypage({
                    cont: 'pagenav',
                    pages: data.totalPages,
                    skin: '#CD00CD',
                    first: '第一页',
                    last: "末页",
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getOrderPage(obj.curr);
                        }
                    }
                });
            }
        });
    };
    getOrderPage();
    $("#searchBtn").click(function () {
        getOrderPage();
    });


    ///开始日期
    $("#mydatepicker2").click(function () {
        getOrderPage();
    });
    ///结束日期
    $("#mydatepicker3").click(function () {
        getOrderPage();
    });
    function getOrderDetail(id) {
        layer.open({
            type: 2,
            title: "保单详细信息",
            maxmin: true,
            fix: false,
            shadeClose: true,////点击任意位置关闭
            area: ['1100px', '800px'],
            content: '/order/toQueryOrderDetail/' + id + '.do',
            end: function () {
                getOrderPage();
            }
        });
    }

    ////是否缴费
    $(".payBtn").click(function () {
        /*alert($(this).val());*/
        ostate = null;
        paystate = $(this).val();
        getOrderPage();
    });
    ////审核状态
    $(".reviewingBtn").click(function () {
        paystate = null;
        ostate = $(this).val();
        getOrderPage();
    });
    ////查询所有
    $("#allBtn").click(function () {
        paystate = null;
        ostate = null;
        $("#mydatepicker2").val(null);
        $("#mydatepicker3").val(null);
        $("#orderid").val(null);
        $("#idcard").val(null);
        $("#carid").val(null);
        getOrderPage();
    });

    ////退保
    function returnInsurance(id) {
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/order/updateOstate.do",
            data: {
                oid: id
            },
            success: function (data) {
                if (data.message == "success") {
                    layer.msg("已申请退保，请耐心等待审核", {icon: 6});
                } else {
                    layer.msg("申请失败!请重试", {icon: 5});
                }
                getOrderPage();
            }
        });
    }

    ////续保
    function getOrderByOuid(id) {
        window.location.href = "/order/getOrderByOuid.do?ouid=" + id;
    };

    /////缴费
    function payorder(id) {
        window.location.href = "/order/getOrderByOuid2.do?ouid=" + id;
    }

    /*/////买保险
    $("#buyBtn").click(function () {
        layer.open({
            type: 2,
            title: "购买保险",
            maxmin: true,
            fix: false,
            shadeClose: true,////点击  任意位置关闭
            area: ['1100px', '800px'],
            content: '/orderInsurance.html',
            end: function () {
                getOrderPage(curr);
            }
        })
    });*/

    ////关闭订单
    function closeOrder(id) {
        $.ajax({
            url: "/order/closeOrder.do",
            type: "post",
            dataType: "json",
            data: {
                ouid: id
            },
            success: function (data) {
                if (data == true) {
                    layer.msg("成功关闭订单", {icon: 6});
                } else {
                    layer.msg("请刷新重试", {icon: 5});
                }
                /////刷新当前页 相当去按F5
                getOrderPage();
            }
        });
    }

    ///导出所有数据 excel
    $("#exportBtn").click(function () {
        window.location.href = "/order/export.do";
    });

</script>